<template>
	<!-- 弹框 -->
	<view v-show= "isShowModal" class="modal" :class="isShowModal ? 'show' : ''">
		
		<!-- 分享弹框 -->
		<view class="share-modal">
			<view class="main">
				<image @click="handleCloseModal" class="close" src="/static/icon1/47.png"></image>
				<view>
					<view @click="handleShare('WXSceneSession')">
						<image src="/static/icon1/57.png" mode="aspectFill"></image>
						<text>微信</text>
					</view>
					<view @click="handleShare('WXSenceTimeline')">
						<image src="/static/icon1/58.png" mode="aspectFill"></image>
						<text>朋友圈</text>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			//是否出现
			isShowModal: {
				type: Boolean,
				default: false	
			},
		
		},
		data () {
			return {
			}
		},
		methods: {
			// 点击分享
			handleShare (wxType) {
				this._$emit('handleShare',wxType)
			},
			openModal(){
				this._$emit('openModal')
			},
			// 关闭分享弹框
			handleCloseModal () {
				this._$emit('handleCloseModal')
			},
		},
	}
</script>

<style scoped lang="less">
	
.modal {
	z-index: 999;
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
		
	&.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	& > .share-modal {
		z-index: 11;
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0,0,0,0.40);	
		
		& > .main {
			position: fixed;
			bottom: 0;
			// padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0 0 0 0 rgba(0,0,0,0.05) inset;
			border-radius: 17px 17px 0 0;
			
			display: flex;
			flex-direction: column;
			// align-items: center;
			& > .close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 42rpx;
			height: 42rpx;
			}
			
			& > view {
				display: flex;
				width: 100vw;
				padding: 110rpx 0 80rpx;
				& > view {
					// border: 1px solid #000000;
					display: flex;
					flex: 1;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					& > image {
						width: 84rpx;
						height: 84rpx;
					}
				}
			}
		}
	
	}
}
</style>
